<!-- 主页 -->
<template>
  <div class="home">
    <!-- 地图 -->
    <UseAMap ref="UseAMapRef" @polygonClick="polygonClick" />
    <!-- 头部 -->
    <Header @typeChange="typeChange" />
    <!-- 地图操作栏 -->
    <ColumnMap v-if="SettingStore.fold" @drawPolygon="drawPolygon" @enterQuery="enterQuery" />
    <!-- 左边图表 -->
    <transition name="fade">
      <ChartLeft ref="ChartLeftRef" v-show="!SettingStore.foldLeft" />
    </transition>
    <!-- 右边图表 -->
    <transition name="fade">
      <ChartRight ref="ChartRightRef" v-show="!SettingStore.foldRight" />
    </transition>
    <!-- 框选数据列表 -->
    <transition name="fade">
      <SelectionDataList v-if="SettingStore.selectionDataListShow" />
    </transition>
    <!-- 数据列表 -->
    <transition name="fade">
      <DataList v-if="SettingStore.propertyShow" />
    </transition>
    <!-- 设置表头 -->
    <transition name="fade">
      <SetTableHeader v-if="SettingStore.setTableHeaderShow" />
    </transition>
    <!-- 详情 -->
    <transition name="fade">
      <Details v-if="SettingStore.detailsShow" />
    </transition>
    <!-- 高级搜索 -->
    <transition name="fade">
      <AdvancedSearch v-if="SettingStore.advancedSearchShow" @enterQuery="enterQuery" />
    </transition>
    <!-- 地图工具 -->
    <MapsTool @setZoom="setZoom" />
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'

import Header from './components/Header.vue'
import ChartLeft from './components/ChartLeft.vue'
import ChartRight from './components/ChartRight.vue'
import SelectionDataList from './components/SelectionDataList.vue'
import DataList from './components/DataList.vue'
import SetTableHeader from './components/SetTableHeader.vue'
import Details from './components/Details.vue'
import AdvancedSearch from './components/AdvancedSearch.vue'
import UseAMap from './components/UseAMap.vue'
import ColumnMap from './components/ColumnMap.vue'
import MapsTool from './components/MapsTool.vue'
import useWarehouseStore from '@/store/modules/warehouse'
const WarehouseStore = useWarehouseStore()
import useSettingStore from '@/store/modules/setting'
const SettingStore = useSettingStore()
const state = reactive({
  type: 'type_1'
})
//  框选
const UseAMapRef = ref()
const drawPolygon = () => {
  UseAMapRef.value.drawPolygon()
}
//  关键字搜索
const enterQuery = () => {
  UseAMapRef.value.enterQuery()
}
//  类型切换
const ChartLeftRef = ref()
const ChartRightRef = ref()
const typeChange = (value: string) => {
  state.type = value
  ChartLeftRef.value.index(value)
  ChartRightRef.value.index(value)
  UseAMapRef.value.queryGeomAjax(value)
}
//  区域事件
const polygonClick = (value: any) => {
  let str = ''
  SettingStore.propertyName = value.name
  if (state.type === 'type_2') {
    str = value.type
  } else {
    str = value.name
  }
  ChartRightRef.value.index(state.type, str)
}
//  设置地图层级
const setZoom = () => {
  UseAMapRef.value.map.setZoom(SettingStore.zoom)
}

onMounted(() => {
  WarehouseStore.listTreePostAjax()
})

</script>
<style scoped lang="scss">
.home {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #e4e4e4;
}


.fade-enter-from {
  opacity: 0;
  transform: scale(0);
}

.fade-enter-active {
  transition: all .3s;
}

.fade-enter-to {
  opacity: 1;
  transform: scale(1);
}
</style>